<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/head :: htmlhead">
<body>

<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">其他单位类型</div>
                <div class="layui-card-body">
                    <div id="industryChart" style="height: 600px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">单位类型</div>
                <div class="layui-card-body">
                    <div id="unitTypeChart" style="height: 300px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">雇员数量</div>
                <div class="layui-card-body">
                    <div id="employeeChart" style="height: 300px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript" type="text/javascript" charset="UTF-8">
    layui.config({
        base: '/static/lib/' //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(["echarts","ecStat"],
        function() {
            var $ = layui.jquery,
                element = layui.element,
                echarts = layui.echarts,

                option1 = {
                    xAxis: {
                        type: 'category',
                        data: [[${industryTypeName}]]
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [[${industryTypeNum}]],
                        type: 'bar',
                        barMaxWidth: '200'
                    }]
                };
            mychart1 = echarts.init(document.getElementById('industryChart'));
            mychart1.setOption(option1, true);

            option2 = {
                xAxis: {
                    type: 'category',
                    data: [[${unitTypeName}]]
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [[${unitTypeNum}]],
                    type: 'bar',
                    barMaxWidth: '100'
                }]
            };
            mychart2 = echarts.init(document.getElementById('unitTypeChart'));
            mychart2.setOption(option2, true);


            var bins = ecStat.histogram([[${employeeNum}]])
            option3 = {
                xAxis: {
                    type: 'value',
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    type:'bar',
                    data:bins.data,
                    barMaxWidth: '100'
                }]
            };
            mychart3 = echarts.init(document.getElementById('employeeChart'));
            mychart3.setOption(option3, true);

        }
    );
</script>
</body>
</html>